<template>
    <div class="tools">
        <!-- 表情包弹窗 -->
        <div class="tools-emoji" v-if="toolIndex === 0 || !toolIndex" ref="toolRef">
            <Picker :data="emojiIndex" :emojiSize="18" @select="handleSelectEmoji" class="emoji-picker"/>
        </div>
        <!-- 工具包 -->
        <template v-for="item in toolList" :key="item.value">
            <ComUpload isInitStyle v-if="item.value === 1" @handleUpload="handleClickTools({...item, ...$event})">
                <i :class="['EachApp', item.icon]" :style="{ 'font-size': item.size + 'px' }" @click="toolIndex = item.value"></i>
            </ComUpload>
            <div v-if="item.value === 2" :class="['send', { 'style': isSend }]">
                <i :class="['EachApp', item.icon, { 'style': isSend }]" :style="{ 'font-size': item.size + 'px' }" @click="handleClickTools(item)"></i>
            </div>
            <i :class="['EachApp', item.icon]" :style="{ 'font-size': item.size + 'px' }" @click="handleClickTools(item)" v-if="![1,2].includes(item.value)"></i>
        </template>
    </div>
</template>
<script lang="ts" setup>
defineProps({
    isSend: { type: Boolean, default: () => { return false } },
    refs: { type: Object, default: () => { return {} } },
})
import ComUpload from '@/components/ComUpload.vue';
import data from 'emoji-mart-vue-fast/data/all.json';
import 'emoji-mart-vue-fast/css/emoji-mart.css';
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src';
const emit = defineEmits(['toolsEmit']);
const toolRef = ref<HTMLDivElement | null>(null);
const toolIndex = ref(-1);
const toolList = ref([
    { value: 0, size: '18', toolsType: '', icon: 'EachApp_biaoqing', label: '表情' },
    { value: 3, size: '20', toolsType: '@', icon: 'EachApp_aite1', label: '艾特' },
    { value: 1, size: '20', toolsType: 'file', icon: 'EachApp_wenjianjia', label: '文件' },
    { value: 2, size: '14', toolsType: 'text', icon: 'EachApp_fasong', label: '发送' },
])
const emojiIndex = new EmojiIndex(data);

onMounted(() => {
    document.addEventListener('click', handleClickOutside);
})
onUnmounted(() => {
    document.removeEventListener('click', handleClickOutside);
})

// 点击工具包
const handleClickTools = (row: any) => {
    const { value } = row;
    if(value === 0){ // 表情
        toolIndex.value = toolIndex.value === 0 ? -1 : 0;
    }else if([1,2,3].includes(value)){ // 文件
        toolIndex.value = value === 1 ? -1 : value;
        emit('toolsEmit', { toolsType: row.toolsType, values: row });
    }
}

// 选择表情
const handleSelectEmoji = (emoji: any) => {
    // console.log('emoji===', {...emoji});
    toolIndex.value = -1;
    emit('toolsEmit', { toolsType: 'emoji', values: emoji.native });
}

// 点击工具包以外的区域，则表情包自动消失
const handleClickOutside = (event: any) => {
    if (toolRef.value && !toolRef.value.contains(event.target)) {
        if(!event.target?.className?.includes('EachApp')){
            toolIndex.value = -1;
        }
    }
}
</script>
<style lang="scss" scoped>
.tools{
    display: flex;
    align-items: center;
    position: relative;
    i,span{
        cursor: pointer;
        color: #888;
        &:not(:last-child){
            margin-right: 10px;
        }
    }
    .send{
        min-width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--green);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: not-allowed;
        &.style{
            cursor: pointer;
        }
        .EachApp{
            color: #ddd;
            margin-left: 2px;
            cursor: not-allowed;
            &.style{
                color: white;
                cursor: pointer;
            }
        }
    }
    &-emoji{
        position: absolute;
        bottom: 32px;
        z-index: 99;
        width: 400px;
        display: flex;
        right: 0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.12),0 0 6px rgba(0,0,0,0.04);
        img{
            margin: 5px;
        }
    }
    :deep(.v3-emoji-picker){
        width: 100%;
        .v3-body{
            padding: 5px 0 5px 5px;
            &-inner{
                scrollbar-color: initial;
                scrollbar-width: initial;
                padding-right: 0;
            }
            h5{
                display: none;
            }
            .v3-emojis{
                button{
                    max-width: 32px !important;
                }
            }
        }
        .v3-footer{
            display: none;
        }
    }
    :deep(.emoji-picker){
        border: none;
        width: 100% !important;
        .emoji-mart-search,
        .emoji-mart-bar,
        .emoji-mart-category-label{
            display: none;
        }
        #emoji-mart-list{
            .emoji-mart-category{
                &:first-child{
                    display: none;
                }
            }
        }
        .emoji-mart-emoji{
            span{
                width: 22px !important;
                height: 22px !important;
            }
        }
    }
}
</style>
